<template>
  <div class="app-container">
    <div class="filter-container c-flex-row c-aligni-center c-justify-sb">
      <el-form class="form-container">
        <el-input @keyup.enter.native="handleFilter" v-model="listQuery.searchName" clearable placeholder="搜索姓名、手机号"
                  class="width200"></el-input>
        <el-date-picker type="date" :editable="false" @change="timeCheck(1)" format="yyyy-MM-dd" placeholder="申请时间（开始）"
                        v-model="listQuery.apply_time">
        </el-date-picker>
        <span class="c-ph10 font-s12 c-fc-xgray">到</span>
        <el-date-picker type="date" :editable="false" @change="timeCheck(2)" format="yyyy-MM-dd" placeholder="申请时间（结束）"
                        v-model="listQuery.end_time">
        </el-date-picker>
        <el-select clearable class="width120" v-model="listQuery.checkStatus" placeholder="审核状态">
          <el-option
            v-for="item in selectOptions"
            :key="item.id"
            :label="item.value"
            :value="item.id">
          </el-option>
        </el-select>
        <el-button type="primary" icon="el-icon-search" @click="handleFilter" class="search">搜索</el-button>
      </el-form>
    </div>
    <div>
      <el-table :data="tableData" :header-row-style="{'font-family': 'PingFangSC-Semibold','backgroundColor': '#f5f7fa','color':'#5c6065'}" v-loading="listLoading" element-loading-text="加载中..." fit highlight-current-row class="c-width100 font-s12  color-222 family-PingFangSC-Regular">
        <el-table-column align="center" label="姓名">
          <template slot-scope="scope">
            <span>{{scope.row.name}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="手机号">
          <template slot-scope="scope">
            <span>{{scope.row.mobile}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="地区">
          <template slot-scope="scope">
            <span>{{scope.row.province}}{{scope.row.city}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="申请身份">
          <template slot-scope="scope">
            <span v-if="scope.row.applyType == 3">合伙人</span>
            <span v-if="scope.row.applyType == 5">事业部</span>
            <!-- <span v-if="scope.row.applyType == 6">分公司</span> -->
          </template>
        </el-table-column>
        <el-table-column align="center" label="说明">
          <template slot-scope="scope">
            <span>{{scope.row.desc}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="申请时间">
          <template slot-scope="scope">
            <span>{{scope.row.applyAt}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="审核状态">
          <template slot-scope="scope">
            <span v-if="scope.row.auditStatus == 1">审核中</span>
            <span v-if="scope.row.auditStatus == 2" style="color:deepskyblue;">已通过</span>
            <span v-if="scope.row.auditStatus == -1" style="color:red;">不合格</span>
            <span v-if="scope.row.auditStatus == -2" style="color:red;">取消身份</span>
          </template>
        </el-table-column>
        <el-table-column align="center" width="150" label="操作">
          <template slot-scope="scope">
            <div v-if="scope.row.auditStatus == 1&&permission == 3">
              <!-- <b @click="qualified(scope.row.aaId, scope.row.userId, 2, scope.$index, scope.row.applyType)">合格</b> -->
              <b @click="editPartnerType(scope.row.userId, scope.$index, scope.row.showpUserId)">合格</b>
              <span class="color-409">|</span>
              <b @click="qualified(scope.row.aaId, scope.row.userId, -1, scope.$index, scope.row.applyType)">不合格</b>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="block text-c">
        <!--分页组件 current-page:当前页   -->
        <!--   page-sizes:每页几条数据（选项）   -->
        <!--   page-size:每页几条数据   -->
        <!--   total:总条数   -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="listQuery.page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="15"
          layout="total, sizes, prev, pager, next, jumper"
          :total="listQuery.total">
        </el-pagination>
      </div>
    </div>
    <editPartner v-if="isShowEditPartner" :userInfo="userInfo" @hideEditPartner="hideEditPartner"
                 @confirmPartner="confirmPartner"></editPartner>
  </div>
</template>
<script>
  import { applyList, agentApply } from '@/api/member'
  import { marketing_partner, getAgentLevels } from '@/utils/permission'
  export default {
    components: {
      editPartner: require('./components/editPartner.vue').default // 引入修改身份组件
    },
    data() {
      return {
        permission: 3,
        listQuery: {
          currentPage: 1, // 当前页
          total: null, // 数据总条数
          apply_time: null, // 搜索的申请时间（开始）
          end_time: null, // 搜所的申请时间（结束）
          checkStatus: null, // 搜索的审核状态
          searchName: null, // 搜索的姓名
          page: 1
        },
        selectOptions: [
          {
            id: 1,
            value: '审核中'
          }, {
            id: 2,
            value: '已通过'
          }, {
            id: -1,
            value: '不合格'
          }
        ],
        tableData: [],
        listLoading: false,
        userInfo: [],
        isShowEditPartner: false,
        tableIndex: null,
        agentLevel: 0
      }
    },
    created() {
      this.getModelPermission()
      this.getList()
      this.agentLevel = getAgentLevels()
    },
    methods: {
      getModelPermission() {
        this.permission = marketing_partner()
      },
      getList() {
        this.listLoading = true
        applyList(this.listQuery).then(res => {
          if (res.data.statusCode == 200) {
            this.tableData = res.data.data.data
            this.listQuery.total = res.data.data.total
            this.listLoading = false
          }
        }).catch(err => {
          console.log(err)
        })
      },
      hideEditPartner(msg) { // 隐藏修改身份组件
        this.isShowEditPartner = false
      },
      confirmPartner(res) {
        this.qualified(this.tableData[this.tableIndex].aaId, this.userInfo.userId, 2, this.tableIndex, res.vipType, res.showId,res.price)
        // var data = { userId: this.userInfo.userId, parentId: res.showId, vipType: res.vipType }
        // confirmPartner(data).then(json => {
        //   if (json.data.statusCode == 200) {
        //     this.$message({
        //       type: 'success',
        //       message: '修改成功!'
        //     })
        //     // this.tableData[this.tableIndex].vipType = res.vipType
        //     this.getList()
        //     this.isShowCommand = false
        //   }
        // }).catch(err => {
        //   console.log(err)
        // })
        this.isShowEditPartner = false
      },
      editPartnerType(id, index, showId) { // 修改身份
        this.userInfo.userId = id
        this.userInfo.reNickname = this.tableData[index].reNickname
        this.userInfo.vipType = this.tableData[index].applyType
        this.userInfo.pVipType = this.tableData[index].pVipType
        this.userInfo.showId = showId
        this.userInfo.agentLevel = this.agentLevel
        this.tableIndex = index
        this.isShowEditPartner = true
      },
      qualified(aaId, userId, type, index, applyType, parentId = null,price) {
        this.$confirm('确定审核' + (type == 2 ? '' : '不') + '通过？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
        	this.listLoading = true
          var data = { aaId: aaId, userId: userId, type: type, applyType: applyType, parentId: parentId,price:price }
          agentApply(data).then(res => {
          	this.listLoading = false
            if (res.data.statusCode == 200) {
              this.$message({
                type: 'success',
                message: '操作成功'
              })
              this.tableData[index].auditStatus = type
            }
          }).catch(err => {
          	this.listLoading = false
            console.log(err)
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
      },
      handleSizeChange(val) { // 切换每页几条数据方法
        // console.log(`每页 ${val} 条`)
        this.listQuery.page = 1
        this.listQuery.limit = val
        this.getList()
      },
      handleCurrentChange(val) { // 切换当前页
        // console.log(`当前页: ${val}`)
        this.listQuery.page = val
        this.getList()
      },
      handleFilter() {
        this.listQuery.page = 1
        this.getList()
      },
      timeCheck(type) {
        if (this.listQuery.apply_time && this.listQuery.end_time && this.listQuery.apply_time > this.listQuery.end_time) {
          this.$message({
            message: '结束时间不能小于开始时间',
            type: 'error'
          })

          if (type == 1) {
            this.listQuery.apply_time = null
          } else {
            this.listQuery.end_time = null
          }
        }
      }
    },
    mounted() {
      this.total = this.tableData.length
    }
  }
</script>

<style scoped>
</style>
